<template>
  <div class="loginPage">
    <div class="header">
      <router-link to="home"><img src="../static/logo.png" /></router-link>

      <router-link to="home" tag="div" class="backHome"> 回到首页 </router-link>
    </div>
    <div>
      <div class="login" v-if="isShow">
        <div class="myLogin">
          <div class="Loginform">
            <a-form-model
              ref="form"
              :model="form"
              :rules="rules"
              @submit="handleSubmit"
              @submit.native.prevent
            >
              <a-form-model-item prop="user">
                <a-input
                  v-model="form.user"
                  placeholder="手机/邮箱"
                  size="large"
                >
                  <a-icon slot="prefix" type="user" />
                </a-input>
              </a-form-model-item>
              <a-form-model-item prop="password">
                <a-input
                  v-model="form.password"
                  type="password"
                  placeholder="密码"
                  size="large"
                >
                  <a-icon slot="prefix" type="lock" />
                </a-input>
              </a-form-model-item>
            </a-form-model>
          </div>
          <div class="forgetPass">
            <span @click="FgShow()">忘记密码？</span>
          </div>
          <div class="loginBtn" @click="onLogin()">登录</div>
          <router-link
            to="registered"
            tag="div"
            class="nav-list-item active signIn"
            >注册</router-link
          >
        </div>
      </div>
      <ForgetPass v-if="Fpshow" @Fshow="FgShow()" />
      <div class="loginfoot">
        Copyright © 2019 tabbywork.com | 成都指针飞渡数字科技有限公司
        <a href="http://www.beian.miit.gov.cn/">蜀ICP备17022130号-1</a>
      </div>
    </div>
  </div>
</template>
<script>
import ForgetPass from "@v/ForgetPass.vue";
export default {
  components: {
    ForgetPass,
  },
  data() {
    return {
      isShow: true,
      Fpshow: false,
      Ishow: false,
      size: "large",
      form: {
        user: "",
        password: "",
      },
      rules: {
        user: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit(e) {
      console.log(this.form);
    },
    onLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert("Login");
        } else {
          return false;
        }
      });
    },
    FgShow() {
      this.isShow = !this.isShow;
      this.Fpshow = !this.Fpshow;
    },
  },
};
</script>
<style lang="less" scoped>
.loginPage {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  .header {
    width: 100%;
    height: 80px;
    background: #fff;
    box-sizing: border-box;
    padding-left: 147px;
    padding-right: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 151px;
      cursor: pointer;
    }
    .backHome {
      width: 104px;
      height: 29px;
      background: #1768e4;
      border-radius: 4px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      line-height: 29px;
      text-align: center;
      cursor: pointer;
    }
  }
  .login {
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    .myLogin {
      width: 350px;
      .Loginform {
        margin-top: 31px;
      }
      .forgetPass {
        margin-top: 19px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666;
        text-align: right;
        span {
          cursor: pointer;
        }
      }
      .loginBtn {
        width: 350px;
        height: 40px;
        border-radius: 4px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .loginBtn {
        background-color: #1768e4;
        box-shadow: 0 2px 6px 0 #d8eee1;
        margin-top: 23px;
        color: #fff;
      }
      .signIn {
        width: 350px;
        height: 40px;
        border-radius: 4px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .signIn {
        box-shadow: 0 2px 6px 0 #e7e7e7;
        margin-top: 20px;
        color: #222;
      }
    }
  }
  .loginfoot {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #787878;
    text-align: center;
  }
}
</style>
